import React, { Component } from 'react';
import { PageHeader ,Input,Space, Table, Tag,Pagination} from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import url from '@/config/url'
import axios from '@/http/http'
const { Search } = Input;
class Index extends Component {
    constructor(){
        super()
        this.columns = [
            {
                title: '序号',
                dataIndex: 'id',
                // key: 'name',
                align:'center',
                // render: (text) => <a>{text}</a>,
            },
            {
                title: '电影院',
                dataIndex: 'name',
                // key: 'age',
                align:'center',
            },
            {
                title: '所在城市',
                dataIndex: 'city_name',
                // key: 'address',
                align:'center',
            },
            {
                title: '所在区',
                dataIndex: 'district_name',
                // key: 'address',
                align:'center',
            },
            {
                title: '具体地址',
                dataIndex: 'address',
                // key: 'address',
                align:'center',
            },
            {
                title: '状态',
                // key: 'tags',
                dataIndex: 'tags',
                align:'center',
                render: (text, record,index) => {
                    return text === '1' ? <Tag color='green' >正常营业</Tag> : <Tag color='red'>暂停营业</Tag>
                }
            },
            ];
            // this.data = [
            // {
            //     key: '1',
            //     name: 'John Brown',
            //     age: 32,
            //     address: 'New York No. 1 Lake Park',
            //     tags: ['nice', 'developer'],
            // },
            // {
            //     key: '2',
            //     name: 'Jim Green',
            //     age: 42,
            //     address: 'London No. 1 Lake Park',
            //     tags: ['loser'],
            // },
            // {
            //     key: '3',
            //     name: 'Joe Black',
            //     age: 32,
            //     address: 'Sidney No. 1 Lake Park',
            //     tags: ['cool', 'teacher'],
            // },
            // ];
    }
    render() {
        return (
            <div>
                {/* 表头 */}
                <PageHeader
                    className="site-page-header"
                    title="电影列表"
                    extra={[
                        <Search key={1} placeholder="请输入影院名" onSearch={this.onSearch} enterButton key={1}/>
                    ]}
                />
                {/* 表格 */}
                <Table  pagination={false} columns={this.columns} dataSource={this.state.data} />
                {/* 分页器 */}
                <Pagination current={this.state.page} total={this.state.total} onChange={this.onChange}/>
            </div>
        );
    }
    state = {
         page: 1, // 当前页数
        data: [],  // 获取到的数据数组
        total: 0, // 数据总条数
        keyword:'' // 搜索关键字
    }
    // 模糊搜索
    onSearch = (key) =>{
        this.setState({
            keyword:key
        },()=>{
            this.loadData(this.state.page)
        })
    }
    // 请求列表数据
    loadData = (page) => {

        axios.get(url.getfilmData,{
            params: { 
                page: page,
                keyword:this.state.keyword 
            }
        }).then(res => {
            // console.log(res);
            this.setState({
                page: res.data.paginate.current_page,
                data: res.data.paginate.data,
                total: res.data.paginate.total
            })
        })
    }
    // 分页器事件
    onChange = (page)=>{
        this.setState({
            page: page,
        },()=>this.loadData(this.state.page))
        
    }
    componentDidMount(){
        this.loadData(this.state.page)
    }
}

export default Index;
